<template>
    <view class="ordDetails">
        <view class="ordDetails_plan">
            <text>订单进度</text>
        </view>
        <view class="oder">
            <view class="odr_flow">
                <view class="even">
                    <view class="{{orDel.state == 'SELLER_SEND' || orDel.state == 'PLATFORM_IDENTIFY'||orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'org' : ''}}">
                        <i class="iconfont icon-gouxuan"></i>
                    </view>
                </view>
                <view class="odd {{orDel.state == 'PLATFORM_IDENTIFY'||orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'org' : ''}}"></view>
                <view class="even">
                    <view class="{{orDel.state == 'PLATFORM_IDENTIFY'||orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'org' : ''}}">
                        <i class="iconfont icon-gouxuan"></i>
                    </view>
                </view>
                <view class="odd {{orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'org' : ''}}"></view>
                <view class="even">
                    <view class="{{orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'org' : ''}}">
                        <i class="iconfont icon-gouxuan"></i>
                    </view>
                </view>
                <view class="odd {{orDel.state == 'RECEIVED' ? 'org' : ''}}"></view>
                <view class="even">
                    <view class="{{orDel.state == 'RECEIVED' ? 'org' : ''}}">
                        <i class="iconfont icon-gouxuan"></i>
                    </view>
                </view>
            </view>
            <view class="odr_miaoshu">
                <view class="even {{orDel.state == 'SELLER_SEND'||orDel.state == 'PLATFORM_IDENTIFY'||orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'colorOrg' : ''}}">卖家已发货</view>
                <view class="odd"></view>
                <view class="even {{orDel.state == 'PLATFORM_IDENTIFY'||orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'colorOrg' : ''}}">平台验货中</view>
                <view class="odd"></view>
                <view class="even {{orDel.state == 'PLATFORM_SEND'||orDel.state == 'RECEIVED' ? 'colorOrg' : ''}}">平台已发货</view>
                <view class="odd"></view>
                <view wx:if="{{newTimeDel}}" class="even">{{newTimeDel}}</view>
                <view wx:if="{{!newTimeDel}}" class="even {{orDel.state == 'RECEIVED' ? 'colorOrg' : ''}}">买家已收货</view>
            </view>
        </view>
        <view class="ord_site" wx:if="{{addressInfo.receiverName}}">
            <view class="ord_site_list">
                <view class="ord_site_h4" wx:if="{{orDel.way == 1}}">商品退回地址</view>
                <view>
                    <text class="fl">收货人:</text>
                    <text style="margin-left: 10px;">{{addressInfo.receiverName}}</text>
                </view>
                <view>
                    <text class="fl">手机号:</text>
                    <text style="margin-left: 10px;">{{addressInfo.receiverPhone}}</text>
                </view>
                <view>
                    <text class="fl">地址:</text>
                    <text style="margin-left: 10px;" class="ord_site_p">{{addressInfo.provinceName + addressInfo.cityName + addressInfo.areaName + addressInfo.address}}</text>
                </view>
                <view class="ord_site_p" wx:if="{{orDel.way == 1}}">商品不符合平台检验标准是，将快递到付寄还给您</view>
            </view>
        </view>
        <view class="ord_site" wx:else>
            <view class="ord_site_list">
                <view class="ord_site_h4">没有收货人信息</view>
            </view>
        </view>
        <view class="purchase_shangping">
            <view class="purchase_next">
                <view class="purchase_img">
                    <image src="{{orDel.topicImage}}"></image>
                </view>
                <view class="shangping">
                    <view>{{orDel.goodsName}}</view>
                    <view>{{orDel.goodsSize}}</view>
                </view>
                <view class="porigth">￥{{orDel.amount}}</view>
            </view>
            <view class="purchase_fot">
                <view class="border-top"></view>
                <view>合计支付</view>
                <view>￥{{orDel.amount}}</view>
            </view>
        </view>
        <view class="foter" wx:if="{{orDel.state == 'PLATFORM_SEND'}}">
            <view class="btnOrg" @tap="sureSh">确认收货</view>
        </view>
    </view>
</template>
<script>
import wepy from 'wepy'
import tip from '@/utils/tip'
import api from '@/api/api';
import { ORDERDETAIL } from '@/utils/constant';

export default class ordDetails extends wepy.page {
    config = {
        // 配置当前页面

        navigationBarTitleText: '订单详情' // 头部标题
    }
    components = {}
    data = {
        orDel: '',
        newTimeDel:'',
        addressInfo:''
    }
    methods = {
        // 方法
        sureSh (){
            const t = this;
            wx.showModal({
                content: '确认收货？',
                success(r){
                    if(r.confirm){
                        t.buyerReceiveFun();
                    }
                }
            });
        }
    }
    events = {}
    onLoad() {
        const t = this;
        let o = wx.getStorageSync(ORDERDETAIL);
        if (o) {
            t.orDel = o;
            if(t.orDel.state == "SELLER_SEND"){
                t.logisticsNoFun();
            }
            t.getAddressFun();
        }
    }

    // 确认收货
    async buyerReceiveFun() {
        const t = this;
        const json = await api.buyerReceive({},t.orDel.orderId);
        if (json.data.code == 0) {
            tip.success('确认收货成功！！',2000);
            wepy.navigateTo({
                url: '/pages/order/orderList?way='+t.orDel.way
            })
        } else {
            tip.error(json.data.msg);
        }
    }
    // 根据物流单号查询物流信息
    async logisticsNoFun() {
        const t = this;
        const json = await api.logisticsNo({},t.orDel.orderId);
        if (json.data.code == 0) {
            t.newTimeDel = json.data.data;
        } else {
            tip.error(json.data.msg);
        }
    }
    // 获取商品收货地址或者卖家回退地址
    async getAddressFun() {
        const t = this;
        const json = await api.getAddress({
            query:{
                orderId:t.orDel.orderId,
                seller: t.orDel.way
            }
        });
        if (json.data.code == 0) {
            t.addressInfo = json.data.data;
            t.$apply();
        } else {
            tip.error(json.data.msg);
        }
    }
}
</script>
<style lang="less">
.ordDetails {
    .ordDetails_plan {
        background: #fff;
        text {
            margin-left: 40rpx;
            margin-right: 40rpx;
            border-bottom: 1px solid #e6e6e6;
            display: block;
            padding: 20rpx 0;
        }
    }
    .oder {
        padding: 80rpx 0;
        background: #fff;
        .odr_flow {
            display: flex;
            justify-content: flex-start;
            background: #fff;
            padding: 0 110rpx;
            .even {
                width: 40rpx;
                height: 40rpx;
                padding: 0 10rpx;
                view {
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: #999;
                    border-radius: 100%;
                    text-align: center;
                }
            }
            .odd {
                width: 100rpx;
                height: 4rpx;
                background: #999;
                margin-top: 20rpx;
            }
            .odd.org {
                background: #ffb025;
            }
        }
        .odr_miaoshu {
            display: flex;
            justify-content: flex-start;
            background: #fff;
            padding: 0rpx 70rpx;
            padding-top: 20rpx;
            .even {
                width: 140rpx;
                text-align: center;
                font-size: 26rpx;
            }
            .odd {
                width: 20rpx;
            }
        }
    }
    .icon-gouxuan {
        color: #fff !important;
    }
    .org {
        background: #ffb025 !important;
    }
    .colorOrg {
        color: #ffb025 !important;
    }
    .ord_site {
        background: #fff;
        margin-top: 20rpx;
        padding: 20rpx;
        overflow: hidden;

        .ord_site_list {
            border: 2px solid red;
            border-image: url();
            border-image-repeat: repeat;
            border-image-slice: 5;
            padding: 20rpx;
            > view {
                overflow: hidden;
                color: #333;
            }
            .ord_site_h4 {
                font-size: 34rpx;
                color: #000;
                padding-bottom: 10rpx;
            }
            .ord_site_p {
                font-size: 26rpx;
                color: #999;
            }
        }

        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
    }
    .purchase_shangping {
        background: #fff;
        .purchase_next {
            display: flex;
            padding: 40rpx 20rpx;
            margin-top: 20rpx;
            position: relative;
            .purchase_img {
                width: 250rpx;
                height: 180rpx;
                text-align: center;
                image {
                    width: 180rpx;
                    height: 180rpx;
                    margin: 0 auto;
                    text-align: center;
                    border: 1px solid #ddd;
                }
            }
            .shangping {
                width: 580rpx;
                position: relative;
                view:last-child {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
            .porigth {
                position: absolute;
                right: 40rpx;
                bottom: 30rpx;
            }
        }
        .purchase_fot {
            display: flex;
            padding: 20rpx 40rpx;
            position: relative;
            view:last-child {
                margin-left: auto;
            }
            .border-top {
                position: absolute;
                top: 0;
                right: 0;
                height: 1rpx;
                width: 720rpx;
                background: #ddd;
            }
        }
    }
    .foter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        overflow: hidden;
        .btnOrg {
            background: #ffb025;
            padding: 20rpx 40rpx;
            width: 30%;
            text-align: center;
            color: #fff;
            float: right;
        }
    }
}
</style>
